<!-- LCA基础信息 -->
<template>
  <div class="lca-assessment-page">
    <div class="go-home" @click="goHome">
      <!-- color="#5cc4a7"  -->
      <el-button size="small" type="primary">返回导航页面</el-button>
    </div>

    <!-- 顶部导航 -->
    <div class="page-header">
      <div class="step-title" :style="{ '--theme': theme }">
        Step1：LCA评估基本信息
      </div>
      <div class="step-progress"></div>
    </div>

    <!-- 主要内容区 -->
    <div class="content-container">
      <!-- 头部区域 -->
      <div class="header-info">
        <el-form
          :inline="true"
          :model="formInline"
          label-position="top"
          class="demo-form-inline"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item
                label="系统边界"
                :rules="[
                  {
                    required: true,
                    message: '请选择系统边界',
                    trigger: 'change',
                  },
                ]"
              >
                <el-select
                  v-model="formInline.systemBoundary"
                  @change="handleBoundaryChange"
                  placeholder="系统边界"
                  clearable
                >
                  <el-option label="摇控到大门" value="1" />
                  <el-option label="摇控到坟墓" value="2" />
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item
                label="基准年"
                :rules="[
                  {
                    required: true,
                    message: '请选择基准年',
                    trigger: 'change',
                  },
                ]"
              >
                <el-date-picker
                  v-model="formInline.baseYear"
                  style="width: 100%"
                  type="year"
                  placeholder="请选择基准年"
                /> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item
                label="功能单位"
                :rules="[
                  { required: true, message: '请输入', trigger: 'blur' },
                ]"
              >
                <el-input
                  v-model="formInline.functionalUnit"
                  placeholder="功能单位"
                  clearable
                /> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="单位">
                <el-select
                  v-model="formInline.unit"
                  placeholder="系统边界"
                  clearable
                >
                  <el-option label="kg" value="0" />
                </el-select> </el-form-item
            ></el-col>
          </el-row>
        </el-form>
      </div>

      <div class="bottom-container">
        <div class="process-container">
          <div class="process-title">生命周期流程图</div>

          <el-steps style="max-width: 1100px" :active="6">
            <el-step
              v-for="item in processList"
              :key="item.value"
              :title="item.name"
            />
          </el-steps>
        </div>

        <!-- 右侧内容 -->
        <div class="right-content">
          <!-- v-model="activeNames" -->
          <el-collapse :expand-icon-position="position" accordion>
            <el-collapse-item title="高级信息" name="1">
              <el-form
                :inline="false"
                :model="formInline2"
                label-position="top"
                class="demo-form-inline"
              >
                <el-row :gutter="30">
                  <el-col :span="8">
                    <el-form-item label="研究目标">
                      <el-input
                        v-model="formInline2.researchObjective"
                        placeholder="研究目标"
                        clearable
                      /> </el-form-item
                  ></el-col>
                  <el-col :span="8">
                    <el-form-item label="依据标准">
                      <el-select
                        v-model="formInline2.standard"
                        placeholder="依据标准"
                        clearable
                      >
                        <el-option
                          label="ISO14067,2018"
                          value="ISO14067,2018"
                        />
                        <el-option label="IPCC2021" value="IPCC2021" />
                      </el-select> </el-form-item
                  ></el-col>
                  <el-col :span="8">
                    <el-form-item label="LCIA评估方法">
                      <el-select
                        v-model="formInline2.standard"
                        placeholder="LCIA评估方法"
                        clearable
                      >
                        <el-option
                          label="ISO14067,2018"
                          value="ISO14067,2018"
                        />
                        <el-option label="IPCC2021" value="IPCC2021" />
                      </el-select> </el-form-item
                  ></el-col>
                </el-row>

                <el-row :gutter="30">
                  <el-col :span="8">
                    <el-form-item label="完整性要求">
                      <el-input
                        v-model="formInline2.integrityRequirement"
                        placeholder="完整性要求"
                        type="textarea"
                      /> </el-form-item
                  ></el-col>
                  <el-col :span="8">
                    <el-form-item label="使用LCA的局限性">
                      <el-input
                        v-model="formInline2.lcaLimitations"
                        placeholder="使用LCA的局限性"
                        type="textarea"
                      /> </el-form-item
                  ></el-col>
                  <el-col :span="8">
                    <el-form-item label="取舍标准">
                      <el-input
                        v-model="formInline2.selectionCriteria"
                        placeholder="取舍标准"
                        type="textarea"
                      /> </el-form-item
                  ></el-col>
                </el-row>
              </el-form>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>

    <!-- 底部操作区 -->
    <div class="footer-actions">
      <el-button type="primary" @click="onSubmit">保存并下一步</el-button>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed } from "vue";
  import useSettingsStore from "@/store/modules/settings";
  const settingsStore = useSettingsStore();
  const emit = defineEmits(["goNav", "saveToNextStep"]);
  // 数据绑定
  const formInline = reactive({
    user: "",
    region: "",
    date: "",
    systemBoundary: "1",
  });
  const position = ref("left");
  const formInline2 = reactive({
    researchObjective: "",
    standard: "",
    lciaAssessmentMethod: "",
    integrityRequirement: "",
    lcaLimitations: "",
    selectionCriteria: "",
    weightEnergyRatio: "",
  });

  const allProcessList = ref([
    {
      name: "原材料获取",
      value: 1,
    },
    {
      name: "原材料运输",
      value: 2,
    },
    {
      name: "生产制造",
      value: 3,
    },
    {
      name: "产品运输",
      value: 4,
    },
    {
      name: "产品使用",
      value: 5,
    },
    {
      name: "产品的回收、处理和废弃",
      value: 6,
    },
  ]);
  const processList = ref([]);

  //返回导航页面
  const goHome = () => {
    emit("goNav");
  };
  //切换系统边界
  const handleBoundaryChange = (value) => {
    console.log("Boundary changed to:", value);
    if (value == 1) {
      processList.value = allProcessList.value.filter(
        (item) => item.value <= 3
      );
    } else if (value == 2) {
      processList.value = allProcessList.value;
    }
  };
  // 折叠面板控制
  const activeNames = ref(["1"]);

  const onSubmit = () => {
    emit("saveToNextStep", "one");
    console.log("submit!");
  };
  const theme = computed(() => {
    return settingsStore.theme;
  });
  onMounted(() => {
    handleBoundaryChange(formInline.systemBoundary);
  });
</script>

<style lang="scss" scoped>
  .lca-assessment-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f5f566;
    border-radius: 10px;
    padding: 20px;
    .go-home {
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
    }
  }

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .step-title {
    font-size: 18px;
    //color: #409eff;
    color: var(--theme);
    font-weight: bold;
  }

  .step-progress {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
  }

  .step-progress span {
    margin-right: 15px;
  }

  .content-container {
    .header-info {
      .el-form--inline.el-form--label-top {
        display: initial;
      }
    }
    .bottom-container {
      .process-container {
        padding: 12px 0;
        .process-title {
          margin-bottom: 10px;
          font-size: 16px;
          font-weight: bold;
          color: #6c6c6c;
        }
        .el-steps {
          margin-left: 15px;
        }
      }
    }
  }
  .footer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  .left-menu {
    width: 200px;
    border-right: 1px solid #e4e7ed;
  }

  .right-content {
    flex: 0.95;
    ::v-deep {
      .el-collapse-item__header {
        padding-left: 15px;
        //color: var(--theme);
        font-size: 14px;
      }
      .el-collapse-item__wrap {
        padding: 0 15px;
      }
    }
  }

  .info-group {
    margin-bottom: 20px;
    background-color: white;
    padding: 15px;
    border-radius: 4px;
  }

  .group-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
  }

  .group-content {
    font-size: 14px;
    color: #606266;
    line-height: 1.6;
  }

  .info-item {
    margin-bottom: 10px;
  }

  .label {
    font-weight: bold;
    margin-bottom: 5px;
  }

  .value {
    color: #666;
  }
</style>
